<template>
  <div class="login_box">
    <van-nav-bar
      title="登录"
      right-text="注册"
      left-arrow
      @click-left="$router.back()"
      @click-right="$router.push('/regist')"
    />
    <van-tabs title-active-color="#ff464e">
      <van-tab title="卷皮账号登录">
        <van-cell-group>
          <van-field v-model="from.username" left-icon='manager-o' label="用户名：" placeholder="请输入用户名" />
          <van-field v-model="from.password" left-icon='bag-o' label="密码：" type="password" placeholder="请输入密码" />
        </van-cell-group>
        <van-button
          type="danger"
          class="login_btn"
          :color="this.from.username===''||this.from.password===''? '#dbdbdb':''"
          @click="login"
          :disabled="this.from.username===''||this.from.password===''"
        >登录</van-button>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
export default {
  data() {
    return {
      from: {
        username: "",
        password: ""
      }
    };
  },
  created() {},
  methods: {
    login() {
      let passwordre = /^[0-9a-zA-Z_]{6,18}$/;
      if (!passwordre.test(this.from.password)) {
        this.$toast("密码输入不正确：必须是6--18位");
        return false;
      }
      let formdata = new URLSearchParams();
      formdata.append("username", this.from.username);
      formdata.append("password", this.from.password);
      this.$http.post("/login", formdata).then(res => {
        console.log(res);
        if (res.data.code === 201) {
          localStorage.setItem("token", res.data.data.token);
          localStorage.setItem('username',this.from.username)
          this.$toast(res.data.data.msg)
          this.$router.push("/");
        }else{
          this.$toast(res.data.error)
        }
      });
    }
  }
};
</script>
<style lang="less">
.login_box {
  .van-nav-bar {
    background: linear-gradient(150deg, #ff5a61 50%, #fd631c);
    .van-ellipsis {
      color: white;
    }
    .van-icon {
      color: white;
    }
    .van-nav-bar__text {
      color: white;
    }
  }
  // .btn_login{
  //   margin: 15px 10px 0px 10px;
  //   width: 95%;
  // }
  .login_btn {
    margin: 15px 10px 0px 10px;
    width: 95%;
  }
}
</style>